<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房车管理</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }

        .camp_img {
            width: 200px;
            margin-right: 20px;
        }

        .search {
            width: 200px;
        }

        .fenye {
            width: 500px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
        }

        .header {
            width: 100%;
            height: 50px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="div">
    <div class="header">
        <el-button type="success" @click="addDialogVisible = true">新增房车信息</el-button>
        <el-select v-model="campName" placeholder="请选择">
            <el-option value="">请选择</el-option>
            <el-option
                    v-for="camp in camps"
                    :key="camp.campId"
                    :label="camp.campname"
                    :value="camp.campname">
            </el-option>
        </el-select>
        <el-input class="search" placeholder="请输入房车名：" clearable suffix-icon="el-icon-search"
                  v-model="carName"></el-input>
        <el-button type="primary" @click="selectCar()">查询</el-button>
    </div>
    <!--新增camp模态框-->
    <el-dialog
            title="提示"
            :visible.sync="addDialogVisible"
            width="30%"
            :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
            </span>
    </el-dialog>
    <!--更新模态框-->
    <el-dialog
            title="更新房车信息"
            :visible.sync="updateDialogVisible"
            width="50%"
            :before-close="handleClose">
        <span>房车名:</span>
        <el-input v-model="updateCarInfo.carName" placeholder="请输入内容"></el-input>
        <span>状态:</span><br>
        <el-select v-model="updateCarInfo.status" placeholder="请选择">
            <el-option
                    v-for="cars in carStatus"
                    :key="cars.status"
                    :label="cars.name"
                    :value="cars.status">
            </el-option>
        </el-select>
        <br>
        <span>所属营地:<br>
             <el-select v-model="updateCarInfo.campId" placeholder="请选择">
                <el-option
                        v-for="camp in camps"
                        :key="camp.campId"
                        :label="camp.campname"
                        :value="camp.campId">
                </el-option>
            </el-select><br>
            <span>版型:</span><br>
            <el-select v-model="updateCarInfo.typeId" placeholder="请选择">
                <el-option
                        v-for="carType in carTypes"
                        :key="carType.typeId"
                        :label="carType.level"
                        :value="carType.typeId">
                </el-option>
            </el-select><br>
            <span>单价/晚:</span><el-input :disabled="true" v-model="updateCarInfo.price" placeholder="请输入内容"></el-input>
            <span>车牌:</span><el-input v-model="updateCarInfo.license" placeholder="请输入内容"></el-input>
            <span>图片</span><br>
            <img :src="updateCarInfo.url" alt="">
            <span slot="footer" class="dialog-footer">
            <el-button @click="updateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateCar()">确 定</el-button>
            </span>
    </el-dialog>
    <!--删除模态框-->
    <el-dialog
            title="移除营地"
            :visible.sync="deleteDialogVisible"
            width="30%"
            :before-close="handleClose">

            <span slot="footer" class="dialog-footer">
            <el-button @click="deleteDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteCamp()">确认删除</el-button>
            </span>
    </el-dialog>


    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="房车ID" width="80">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.carId}}</span>
                </template>
            </el-table-column>
            <el-table-column label="房车名" width="250">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>二维码: {{ scope.row.codeUrl }}</p>
                        <p>车牌号: {{ scope.row.license }}</p>
                        <img :src="scope.row.url" alt="">
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.carName }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column label="所属营地" width="250">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.campName}}</span>
                </template>
            </el-table-column>
            <el-table-column label="单价/晚" width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.price}}</span>
                </template>
            </el-table-column>
            <el-table-column label="版型" width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.level}}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="80">
                <template slot-scope="scope">
                    <span style="margin-left: 10px" v-if="scope.row.status==0">空闲</span>
                    <span style="margin-left: 10px" v-if="scope.row.status==1">已预约</span>
                    <span style="margin-left: 10px" v-if="scope.row.status==2">已客满</span>
                    <span style="margin-left: 10px" v-if="scope.row.status==3">维修</span>
                    <span style="margin-left: 10px" v-if="scope.row.status==4">退休</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--分页-->
    <div class="fenye">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageIndex"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="page.number"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.dataCount">
        </el-pagination>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#div",
        data: {
            carName: '',
            campName: '',
            //定义集合存储营地信息
            tableData: [],
            page: {
                pageIndex: 1,
                number: 2,
                pageCount: null,
                dataCount: null
            },
            //新增camp模态框默认关闭
            updateDialogVisible: false,
            addDialogVisible: false,
            deleteDialogVisible: false,
            updateCarInfo: {
                carId: 0,
                carName: '',
                campId: 0,
                campName: '',
                typeId: 0,
                status: 0,
                codeUrl: '',
                license: '',
                url: '',
                level: 0,
                price: 0
            },
            camps: [],
            carTypes: [],
            carStatus: [{
                status: 0,
                name: '空闲',
            },
                {
                    status: 1,
                    name: '已预约',
                },
                {
                    status: 2,
                    name: '客满',
                },
                {
                    status: 3,
                    name: '维修',
                }, {
                    status: 4,
                    name: '退休',
                }]
        },
        created: function () {
            this.selectCar();
            this.selectAllCarType();
            this.selectCamp();

        },
        methods: {
            //查询房车
            selectCar() {
                var _this = this;
                $.ajax({
                    url: "/car/selectCar",
                    type: "get",
                    data: {
                        "index": _this.page.pageIndex,
                        "number": _this.page.number,
                        "carName": _this.carName,
                        "campName": _this.campName
                    },
                    dataType: "json",
                    success: function (data) {
                        _this.tableData = data.list,
                            _this.page.pageIndex = data.obj.pageIndex;
                        _this.page.number = data.obj.number;
                        _this.page.pageCount = data.obj.pageCount;
                        _this.page.dataCount = data.obj.count;
                    },
                    error: function (data) {
                        alert(data.responseJSON.message);
                    }
                });
            },
            //查询所有的款式
            selectAllCarType() {
                var _this = this;
                $.ajax({
                    url: "/car/selectAllCarType",
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        _this.carTypes = data.list;
                        console.log(_this.carTypes)
                    },
                    error: function (data) {
                        alert(data.responseJSON.message);
                    }
                });
            },
            //查询所有营地
            selectCamp() {
                var _this = this;
                $.ajax({
                    url: "/camp/selectAllCamp",
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        _this.camps = data.list;
                    },
                    error: function (data) {
                        alert(data.responseJSON.message);
                    }
                });
            },
            deleteCar(row) {
                var _this = this;
                $.ajax({
                    url: "/car/deleteCar",
                    type: "get",
                    data: {"carId": row.carId},
                    dataType: "json",
                    success: function (data) {
                        _this.page.pageIndex = 1;
                        _this.selectCar();
                    },
                    error: function (data) {
                        alert(data.responseJSON.message);
                    }
                });
            },
            updateCar() {
                var _this = this;
                $.ajax({
                    url: "/car/updateCar",
                    type: "get",
                    data: _this.updateCarInfo,
                    dataType: "json",
                    success: function (data) {
                        _this.open1();
                        _this.selectCamp();
                        _this.updateDialogVisible = false;
                    },
                    error: function (data) {
                        _this.open2();
                        alert(data.responseJSON.message);
                    }
                });
            },
            handleEdit: function (index, row) {
                this.updateCarInfo = row;
                this.updateDialogVisible = true;
            },
            handleDelete: function (index, row) {
                this.open(row);
            },
            //分页
            handleSizeChange(val) {
                this.page.number = val;
                this.selectCar();
            },
            handleCurrentChange(val) {
                this.page.pageIndex = val;
                this.selectCar();
            },
            //模态框确认
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //操作成功提示
            open1() {
                this.$notify({
                    title: '成功',
                    message: '操作成功',
                    type: 'success'
                });
            },
            open2() {
                this.$notify.error({
                    title: '错误',
                    message: '操作失败'
                });
            },
            open(row) {
                this.$confirm('您正在移除房车, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                    });
                    this.deleteCar(row)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    })
</script>
</body>
</html>